<template>
  <div class="ljqd">
    <el-card class="box-card">
      <!--      <div slot="header" class="clearfix">-->
      <!--        <span>观看视频</span>-->
      <!--      </div>-->
      <div class="card-content">
        <!--观看视频-->
        <div v-if="item.taskCode === 'ZYLX_SP'">
          <div class="card-item">
            任务类型：
            <el-radio v-model="item.taskType" label="1">必修</el-radio>
            <el-radio v-model="item.taskType" label="2">选修</el-radio>
          </div>
          <div class="card-item">
            <el-radio v-model="item.finishCondition" label="2">完整视频</el-radio>
            <el-radio v-model="item.finishCondition" label="1">指定时长</el-radio>
            <el-button type="primary" @click="handleSelectResources">选择视频</el-button>
            <el-button type="warning" @click="handleDelete"> 删除</el-button>
          </div>
          <div class="card-item">
            <span class="label">观看</span>
            <el-input v-model="item.resourcesName" class="input" disabled />
            <span class="label">全部视频</span>
            <span v-show="item.finishCondition === '1'">
              <span class="label">,累计</span>
              <el-input-number v-model="item.finishValue" :controls="false" :min="0" placeholder="请输入时长" />
              <span class="label">分钟</span>
            </span>
            <span>,可得</span>
            <el-input-number v-model="item.getReward1" :controls="false" :min="0" placeholder="请输入学时" />
            <span class="label">
              学时
            </span>
            。
          </div>
        </div>
        <!-- 收听音频-->
        <div v-if="item.taskCode === 'ZYLX_YP'">
          <div class="card-item">
            任务类型：
            <el-radio v-model="item.taskType" label="1">必修</el-radio>
            <el-radio v-model="item.taskType" label="2">选修</el-radio>
          </div>
          <div class="card-item">
            <el-radio v-model="item.finishCondition" label="2">完整音频</el-radio>
            <el-radio v-model="item.finishCondition" label="1">指定时长</el-radio>
            <el-button type="primary" @click="handleSelectResources">选择音频</el-button>
            <el-button type="warning" @click="handleDelete"> 删除</el-button>
          </div>
          <div class="card-item">
            <span class="label">收听</span>
            <el-input v-model="item.resourcesName" class="input" disabled />
            <span class="label">全部音频</span>
            <span v-show="item.finishCondition === '1'">
              <span class="label">,累计</span>
              <el-input-number v-model="item.finishValue" :controls="false" :min="0" placeholder="请输入时长" />
              <span class="label">分钟</span>
            </span>
            <span>,可得</span>
            <el-input-number v-model="item.getReward1" :controls="false" :min="0" placeholder="请输入学时" />
            <span class="label">
              学时
            </span>
            。
          </div>
        </div>
        <!-- 查看新闻-->
        <div v-if="item.taskCode === 'ZYLX_XW'">
          <div class="card-item">
            任务类型：
            <el-radio v-model="item.taskType" label="1">必修</el-radio>
            <el-radio v-model="item.taskType" label="2">选修</el-radio>
          </div>
          <div class="card-item">
            <el-radio v-model="item.finishCondition" label="1">指定数量</el-radio>
            <el-radio v-model="item.finishCondition" label="2">指定资料</el-radio>
            <el-button type="primary" @click="handleSelectResources">选择新闻</el-button>
            <el-button type="warning" @click="handleDelete"> 删除</el-button>
          </div>
          <div v-if="item.finishCondition === '2'" class="card-item">
            <span class="label">查看</span>
            <el-input v-model="item.resourcesName" class="input" disabled />
            <span class="label">全部新闻</span>
            <span>,可得</span>
            <el-input-number v-model="item.getReward1" :controls="false" :min="0" placeholder="请输入学时" />
            <span class="label">
              学时
            </span>
            。
          </div>
          <div v-else class="card-item">
            <span class="label">查看</span>
            <el-input v-model="item.finishValue" class="input" />
            <span class="label">条新闻</span>
            <span>,可得</span>
            <el-input-number v-model="item.getReward1" :controls="false" :min="0" placeholder="请输入学时" />
            <span class="label">
              学时
            </span>
            。
          </div>
        </div>
        <!-- 查看资料-->
        <div v-if="item.taskCode === 'ZYLX_ZL'">
          <div class="card-item">
            任务类型：
            <el-radio v-model="item.taskType" label="1">必修</el-radio>
            <el-radio v-model="item.taskType" label="2">选修</el-radio>
          </div>
          <div class="card-item">
            <el-radio v-model="item.finishCondition" label="1">指定数量</el-radio>
            <el-radio v-model="item.finishCondition" label="2">指定资料</el-radio>
            <el-button type="primary" @click="handleSelectResources">选择资料</el-button>
            <el-button type="warning" @click="handleDelete"> 删除</el-button>
          </div>
          <div v-if="item.finishCondition === '2'" class="card-item">
            <span class="label">查看</span>
            <el-input v-model="item.resourcesName" class="input" disabled />
            <span class="label">全部新闻</span>
            <span>,可得</span>
            <el-input-number v-model="item.getReward1" :controls="false" :min="0" placeholder="请输入学时" />
            <span class="label">
              学时
            </span>
            。
          </div>
          <div v-else class="card-item">
            <span class="label">查看</span>
            <el-input v-model="item.finishValue" class="input" />
            <span class="label">份资料</span>
            <span>,可得</span>
            <el-input-number v-model="item.getReward1" :controls="false" :min="0" placeholder="请输入学时" />
            <span class="label">
              学时
            </span>
            。
          </div>
        </div>
        <!-- 参与直播-->
        <div v-if="item.taskCode === 'ZYLX_ZB'">
          <div class="card-item">
            任务类型：
            <el-radio v-model="item.taskType" label="1">必修</el-radio>
            <el-radio v-model="item.taskType" label="2">选修</el-radio>
          </div>
          <div class="card-item">
            <el-radio v-model="item.finishCondition" label="1">指定数量</el-radio>
            <el-radio v-model="item.finishCondition" label="2">指定直播</el-radio>
            <el-button type="primary" @click="handleSelectResources">选择直播</el-button>
            <el-button type="warning" @click="handleDelete"> 删除</el-button>
          </div>
          <div v-if="item.finishCondition === '2'" class="card-item">
            <span class="label">参与</span>
            <el-input v-model="item.resourcesName" class="input" disabled />
            <span class="label">全部直播</span>
            <span>,可得</span>
            <el-input-number v-model="item.getReward1" :controls="false" :min="0" placeholder="请输入学时" />
            <span class="label">
              学时
            </span>
            。
          </div>
          <div v-else class="card-item">
            <span class="label">参与</span>
            <el-input v-model="item.finishValue" class="input" />
            <span class="label">场直播</span>
            <span>,可得</span>
            <el-input-number v-model="item.getReward1" :controls="false" :min="0" placeholder="请输入学时" />
            <span class="label">
              学时
            </span>
            。
          </div>
        </div>
        <!-- 参与活动-->
        <div v-if="item.taskCode === 'ZYLX_HD'">
          <div class="card-item">
            任务类型：
            <el-radio v-model="item.taskType" label="1">必修</el-radio>
            <el-radio v-model="item.taskType" label="2">选修</el-radio>
          </div>
          <div class="card-item">
            <el-radio v-model="item.finishCondition" label="1">指定数量</el-radio>
            <el-radio v-model="item.finishCondition" label="2">指定活动</el-radio>
            <el-button type="primary" @click="handleSelectResources">选择活动</el-button>
            <el-button type="warning" @click="handleDelete"> 删除</el-button>
          </div>
          <div v-if="item.finishCondition === '2'" class="card-item">
            <span class="label">参与</span>
            <el-input v-model="item.resourcesName" class="input" disabled />
            <span class="label">全部活动</span>
            <span>,可得</span>
            <el-input-number v-model="item.getReward1" :controls="false" :min="0" placeholder="请输入学时" />
            <span class="label">
              学时
            </span>
            。
          </div>
          <div v-else class="card-item">
            <span class="label">参与</span>
            <el-input v-model="item.finishValue" class="input" />
            <span class="label">场活动</span>
            <span>,可得</span>
            <el-input-number v-model="item.getReward1" :controls="false" :min="0" placeholder="请输入学时" />
            <span class="label">
              学时
            </span>
            。
          </div>
        </div>
        <!-- 参与闯关-->
        <div v-if="item.taskCode === 'ZYLX_CG'">
          <div class="card-item">
            任务类型：
            <el-radio v-model="item.taskType" label="1">必修</el-radio>
            <el-radio v-model="item.taskType" label="2">选修</el-radio>
          </div>
          <div class="card-item">
            <el-radio v-model="item.finishCondition" label="1">指定数量</el-radio>
            <el-radio v-model="item.finishCondition" label="2">指定闯关</el-radio>
            <el-button type="primary" @click="handleSelectResources">选择闯关</el-button>
            <el-button type="warning" @click="handleDelete"> 删除</el-button>
          </div>
          <div v-if="item.finishCondition === '2'" class="card-item">
            <span class="label">参与</span>
            <el-input v-model="item.resourcesName" class="input" disabled />
            <span class="label">全部闯关</span>
            <span>,可得</span>
            <el-input-number v-model="item.getReward1" :controls="false" :min="0" placeholder="请输入学时" />
            <span class="label">
              学时
            </span>
            。
          </div>
          <div v-else class="card-item">
            <span class="label">参与</span>
            <el-input v-model="item.finishValue" class="input" />
            <span class="label">个闯关</span>
            <span>,可得</span>
            <el-input-number v-model="item.getReward1" :controls="false" :min="0" placeholder="请输入学时" />
            <span class="label">
              学时
            </span>
            。
          </div>
        </div>
        <!-- 查看专区-->
        <div v-if="item.taskCode === 'ZYLX_ZQ'">
          <div class="card-item">
            任务类型：
            <el-radio v-model="item.taskType" label="1">必修</el-radio>
            <el-radio v-model="item.taskType" label="2">选修</el-radio>
          </div>
          <div class="card-item">
            <el-radio v-model="item.finishCondition" label="1">指定数量</el-radio>
            <el-radio v-model="item.finishCondition" label="2">指定专区</el-radio>
            <el-button type="primary" @click="handleSelectResources">选择专区</el-button>
            <el-button type="warning" @click="handleDelete"> 删除</el-button>
          </div>
          <div v-if="item.finishCondition === '2'" class="card-item">
            <span class="label">参与</span>
            <el-input v-model="item.resourcesName" class="input" disabled />
            <span class="label">全部专区</span>
            <span>,可得</span>
            <el-input-number v-model="item.getReward1" :controls="false" :min="0" placeholder="请输入学时" />
            <span class="label">
              学时
            </span>
            。
          </div>
          <div v-else class="card-item">
            <span class="label">参与</span>
            <el-input v-model="item.finishValue" class="input" />
            <span class="label">个专区</span>
            <span>,可得</span>
            <el-input-number v-model="item.getReward1" :controls="false" :min="0" placeholder="请输入学时" />
            <span class="label">
              学时
            </span>
            。
          </div>
        </div>
        <div class="card-item">
          <span class="label">
            任务说明
          </span>
          <el-input v-model="item.taskRemark" placeholder="请输入说明" class="input" />
        </div>
        <div class="card-item">
          <span class="label">
            任务排序
          </span>
          <el-input-number v-model="item.sort" :controls="false" placeholder="请输入排序" class="input" />
        </div>
        <div class="card-item">
          <span class="label">
            任务可完成次数
          </span>
          <el-input-number v-model="item.canFinishTimes" :controls="false" placeholder="请输入可完成次数" class="input" />
        </div>
      </div>
    </el-card>
    <el-dialog v-if="dialogFormVisible" :title="'选择资源'" :visible.sync="dialogFormVisible" center fullscreen :close-on-click-modal="false">
      <el-col :span="18">
        <div class="tablewrap" style="height: 100%; overflow-y:auto;">
          <div class="search-inner">
            <el-row>
              <el-col :span="6">
                <div class="search-inner-item">
                  <div class="item-label">名称</div>
                  <el-input v-model.trim="search.name" style="width: 90%;" class="filter-item" placeholder="请输入名称搜索" />
                </div>
              </el-col>
              <el-col :span="6" style="margin-bottom: 10px;">
                <div class="search-inner-item">
                  <div class="item-label">&nbsp;</div>
                  <el-button class="search-btn" @click="resetting">重置</el-button>
                  <el-button style="margin-right: 10px" class="search-btn" type="primary" @click="handleFilter">搜索</el-button>
                </div>
              </el-col>
            </el-row>
          </div>
          <v-table
            v-if="item.taskCode"
            :list="dialogList"
            :tag="tagList[item.taskCode]"
            :list-loading="dialogListLoading"
            :filter-column="filtercolumn"
            :source-arr="sourceArr"
            :selection="true"
            @handleSelectionChange="dialogHandleSelectionChange"
          />
          <div class="btn-pagion fix">
            <pagination :total="dialogTotal" :page.sync="dialogListQuery.page" :limit.sync="listQuery.limit" @pagination="handleFilter" />
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <p>已选择资源：</p>
        <ul class="selectUser">
          <li v-for="item in dialogMultipleSelection" :key="item">{{ item.subjectName }}</li>
        </ul>
      </el-col>
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="dialogFormVisible = false">取消</el-button>
        <el-button style="padding: 8px 30px;" type="primary" @click="handleInsert()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryPage } from '../api/classConfigApi'
import vTable from '@/components/Table'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { string } from 'clipboard'
export default {
  name: 'Gksp',
  components: { Pagination, vTable },
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
    areaId: {
      type: string,
      require: true,
      default: ''
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      search: {
        name: ''
      },
      dialogListLoading: false,
      dialogTotal: 0,
      dialogMultipleSelection: [],
      sourceArr: ['subjectImgUrl'],
      dialogList: [],
      dialogListQuery: {
        page: 1,
        limit: 10
      },
      listQuery: {
        page: 1,
        limit: 10
      },
      tagList: {
        ZYLX_SP: 'contentVideoLibrarRelease', // 视频
        ZYLX_YP: 'contentAideoLibrarRelease', // 音频
        ZYLX_ZL: 'documentLibraryLibrarRelease', // 资料
        ZYLX_XW: 'news', // 新闻
        ZYLX_ZB: 'liveIndex', // 直播
        ZYLX_HD: 'documentLibraryLibrarRelease', // 活动
        ZYLX_KS: 'documentLibraryLibrarRelease', // 考试
        ZYLX_CG: 'documentLibraryLibrarRelease', // 闯关
        ZYLX_ZQ: 'documentLibraryLibrarRelease', // 专区
        ZYLX_TP: 'imgLibrary', // 图片
        ZYLX_KC: 'courseManagement' // 课程
      },
      tag: 'contentVideoLibrarRelease'
    }
  },
  created() {},
  methods: {
    /**
     * 表格数据过滤
     * @param scope
     * @param item
     */
    filtercolumn(scope, item) {
      return scope.row[item]
    },
    // 重置选项
    resetting() {
      this.search.name = ''
    },
    // 搜索资源
    handleFilter() {
      this.dialogListLoading = true
      var query = {
        areaId: this.areaId,
        type: this.item.taskCode,
        page: this.listQuery.page,
        pageSize: this.listQuery.limit
      }
      return new Promise((resolve, reject) => {
        queryPage(query)
          .then((response) => {
            this.dialogListLoading = false
            this.dialogList = response.data.data.rows
            this.total = response.data.data.total
          })
          .catch((error) => {
            this.dialogListLoading = false
            reject(error)
          })
      })
    },
    handleSelectResources() {
      this.dialogFormVisible = true
      this.handleFilter()
    },
    dialogHandleSelectionChange(arr) {
      this.dialogMultipleSelection = arr
    },
    handleInsert() {
      const dataClone = this.dialogMultipleSelection.map((item) => {
        return {
          resourcesId2: item.id,
          resourcesId3: item.subjectName
        }
      })
      this.item.resourcesName = this.dialogMultipleSelection.map((item) => item.subjectName).toString()
      this.item.resourcesJson = dataClone
      this.dialogFormVisible = false
    },
    handleDelete() {
      this.$emit('delete', this.item)
    }
  }
}
</script>

<style lang="scss">
.ljqd {
  .box-card {
    .card-content {
      .card-item {
        margin-bottom: 10px;
        .label {
          font-size: 14px;
          color: #333;
          margin: 5px;
        }
        .input {
          width: 200px;
        }
      }
    }
  }
  .tablewrap {
    padding-left: 20px;
    border-left: 1px solid #e2e3e8;
    position: relative;
    top: -10px;
    padding-top: 20px;
  }
  .search-inner {
    margin-bottom: 10px;
    .search-inner-item {
      margin-bottom: 10px;
      .item-label {
        margin-bottom: 10px;
      }
    }
    .span {
      overflow: hidden;
      display: inline-block;
    }
    .btn-container-title-select {
      display: inline-block;
      width: 744px;
      overflow: hidden;
      resourcesname-overflow: ellipsis;
      white-space: nowrap;
      @include font-color($mainColor);
    }
  }
  .selectUser {
    padding: 0;
    margin-top: 30px;
    height: 355px;
    overflow: auto;
    list-style: none;
    li {
      padding: 5px 8px;
      margin: 0;
      float: left;
      list-style: none;
      font-size: 14px;
      @include font-color($mainColor);
      @include border-color(1px, solid, $mainColor);
      border-radius: 5px;
      margin-left: 8px;
      margin-bottom: 8px;
    }
  }
}
</style>
